<template>
  <div class="page_set">
    <!-- 法币设置 -->
    <div class="content_leset">
      <div class="leset_head">
        <section class="g-full-header">
          <div class="g-full-in flex-between-center overflow-hide">
            <div class="flex-y-center mobile-header">
              <div class="top_link">
                <div class="top_zero">
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/mycenter/security' }">个人中心</el-breadcrumb-item>
                    <el-breadcrumb-item>糖果兑换功能</el-breadcrumb-item>
                  </el-breadcrumb>
                </div>
              </div>
            </div>
            <p class="spilte-in"></p>
            <div class="apply_btn">
              <el-button type="primary" @click="navigateTo('/mycenter/candyCoexch')">兑换专区</el-button>
            </div>
          </div>
        </section>
      </div>
      <!-- cont -->
      <div class="container myinvite qiandao">
        <div class="qiandao_btn m-top-15">
          <div class="coin_main">
            <ul class="coin_exbox flex">
              <li>
                <p>编号 </p>  <p>{{exchCoinInfo.autoid}}</p>
              </li>
              <li>
                <p>本月可兑换额度</p>  <p>{{exchCoinInfo.unfilled}}</p>
              </li>
              <li>
                <p>兑换币种</p>  <p>{{exchCoinInfo.tradcoin}}</p>
              </li>
              <li>
                <p>兑换比例</p>  <p>{{exchCoinInfo.gas}}</p>
              </li>
              <li>
                <p>主币种</p>  <p>{{exchCoinInfo.maincoin}}</p>
              </li>
              <li>
                <p>开始时间</p>  <p>{{exchCoinInfo.wdate}}</p>
              </li>
              <li>
                <p>本月兑换额度</p>  <p>{{exchCoinInfo.height}}</p>
              </li>
            </ul>
            <div>

            </div>
          </div>
        </div>
        <div class="qiandao_total m-top-15">
          <div class="coin_exboxinput">
            <el-input
              placeholder="请输入兑换数量"  type=""
              v-model="inputNum"  maxlength='10'
              clearable>
            </el-input>
            <el-button type="primary" @click="exchCoinBtn()" >点击兑换</el-button>
          </div>
        </div>
        <!-- 兑换记录 -->
        <div   class="l-table mt16">
        <h2  class="l-table-title">
          <span  class="l-table-label">兑换记录</span>
        </h2>
        <div  class="l-table-body">
          <template>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="wdate"
                label="兑换时间"
                width="280">
              </el-table-column>
              <el-table-column
                prop="tonumber"
                label="兑换数量"
                width="280">
              </el-table-column>
              <el-table-column
                prop="tradcoin"
                label="交易币种">
              </el-table-column>
              <el-table-column
                prop="gas"
                label="兑换比例">
              </el-table-column>
              <el-table-column
                prop="maincoin"
                label="糖果">
              </el-table-column>
              <el-table-column
                prop="fromnumber"
                label="糖果数量">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <!-- end -->
      </div>
    </div>
    <!-- 弹窗 -->
  </div>
</template>
<script>
import axios from "axios";

export default {
  components: {
    
  },
  data() {
    return {
      tableData:[],
      siginAll:"0",
      exchCoinInfo:{
            "unfilled": "83333",
            "tradcoin": "KST",
            "autoid": "1",
            "gas": "0.05",
            "maincoin": "CANDY",
            "wdate": "2020/05/31 00:00:00",
            "height": "83333"
      },
      inputNum: '' ,
      minExNum: '' ,
      autoid:'',
    };
  },
  mounted() {
    this.candy_coin();
  },
  methods: {
    // 添加兑换
    exchCoinBtn(){
      if(this.inputNum==''){
				this.$message.error('请输入数量');
        return
			}
			// if(this.inputNum<this.minExNum){
			// 	this.$message.error('兑换数量需大于最低兑换值');
			// 	return
			// }
      this.request(this.api.add_candy,{autoid:this.autoid,number:this.inputNum}).then(res => {
        if (res.code == "0") {
          this.$message({message: '恭喜你，兑换成功！',type: 'success'});
          // 刷新
          this.candy_coin();
          this.candy_order();
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    // 查询兑换记录
    candy_order() {
      this.request(this.api.candy_order,).then(res => {
        if (res.code == "0") {
          this.tableData = res.data;
        }
      })
    },
    // 查询兑换信息
    candy_coin(){
      this.request(this.api.candy_coin,).then(res => {
        if (res.code == "0") {
          this.exchCoinInfo = res.data[0];
          this.autoid=this.exchCoinInfo.autoid; 
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.content_leset {
  .container {
    margin: 0 auto;
    width: 1200px;
  }
  .myinvite{
    min-height: 800px;
  }
  .g-full-header {
    width: 100%;
    background-color: #1b2945;
    padding: 46px 0;
    border-top: 1px solid #171c2c;
  }
  .g-full-in {
    width: 1200px;
    margin: 0 auto;
    .mobile-name {
      display: none;
    }
  }
}

//
.flex-between,
.flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items:center ;
}
.flex-between-center,
.flex-start-center {
  align-items: center;
}
.flex-center,
.flex-y-center {
  display: flex;
  align-items: center;
}
.flex-auto {
    flex: 1 1 auto;
}
.font24 {
  font-size: 24px;
}
.g-full-in .line:after {
  content: " / ";
  display: inline-block;
  margin: 0 32px;
}
.font12 {
  font-size: 12px;
}
.cursor {
  cursor: pointer;
}
.g-full-in {
  .buy {
    color: #0da88b;
  }
  .sell {
    color: #ef5656;
  }
  .indent {
    margin-bottom: 8px;
  }
}
.font-gray {
    color: #9aa5b5;
}
.font-black {
    color: #495666;
}

// 糖果社区
.top_link{
  .top_zero{
    .el-breadcrumb{
      span.is-link{
        color: #357ce1!important;
      }
      
    }
  }
}
.qiandao{
  .l-table {
    border-radius: 2px;
    border: 1px solid #e6ecf2;
    background-color: #fff;
  }
  .l-table-title {
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 24px;
    font-size: 14px;
    min-height: 48px;
    border-bottom: 1px solid #e6ecf2;
    background-color: #f2f6fa;
  }
}
// 币种兑换
.coin_main{
  .coin_exbox{
      li{
        flex:1;margin-right:30px;flex-wrap:wrap ;
        p{line-height: 24px;}
        p:nth-child(1){width: 130px;}
        p:nth-child(2){margin-left: 0px;}
      }
  }
}
.coin_exboxinput{
  margin-bottom: 30px;
  .el-input{width: 300px;margin-right: 30px;}
}

</style>
